<template>
	<view class="container">
		<view class="details">
			<u-tag v-if="info.type == 1" text="招领" mode="dark" type="success"/>
			<u-tag v-if="info.type == 2" text="寻物" mode="dark" type="error"/>
			<view class="title">
				{{info.title}}
			</view>
			<view class="content">
				<text>{{info.content}}</text>
			</view>
			<view class="address" v-if="info.type == 1">
				<text>拾取地址：{{info.pickAddress}}</text><br/>
				<text>寄存地址：{{info.takeAddress}}</text>
			</view>
			<image v-if="info.pic != null" mode="widthFix" :src="info.pic"></image>
			
			<view class="time">发布时间：{{formatDate(info.createTime)}}</view>
		</view>
		<view class="user-info"  @click="toUserInfoPage">
			<view class="info">
				<view class="name">{{userInfo.nickName}}</view>
				<view class="remark">{{userInfo.remark || '这个人还没有介绍哦'}}</view>
			</view>
			<u-avatar class="avatar" :src="userInfo.avatar" size="default"></u-avatar>
		</view>
		
		<view class="bottom"></view>
		
		<!-- 不是自己发布的 -->
		<view class="handle" v-if="!isMyself">
			<u-button size="medium" shape="circle" @click="callTa()">联系ta</u-button>
			<u-button 
				size="medium" 
				shape="circle" 
				type="success" 
				@click="claimModalShow = true"
				v-if="info.status == 0 && info.type == 1">认领</u-button>
			<u-button 
				size="medium" 
				shape="circle" 
				type="error" 
				@click="returnModalShow = true"
				v-if="info.status == 0 && info.type == 2">归还</u-button>
		</view>
		
		<!-- 自己发布的 -->
		<view class="handle" v-if="isMyself && info.status == 0">
			<u-button size="medium" shape="circle" @click="delModalShow = true">删除</u-button>
			<u-button size="medium" shape="circle" @click="edit()">修改</u-button>
		</view>
		
		<u-modal 
			v-model="delModalShow" 
			content="确认删除吗？" 
			:show-cancel-button="true"
			@confirm="del()"
			></u-modal>
			
		<u-modal
			v-model="claimModalShow" 
			title="确认认领吗？"
			content="认领之前请详细确认物品信息" 
			:show-cancel-button="true"
			@confirm="claim()"
			></u-modal>
			
		<u-modal
			v-model="returnModalShow" 
			title="确认归还吗？"
			content="归还之前请详细确认物品信息" 
			:show-cancel-button="true"
			@confirm="returnFound()"
			></u-modal>
		
	</view>
</template>

<script>
	import { constant } from '@/utils/constant.js'
	import {
		getLostFoundInfo,getUserInfo,deleteByFoundId,claim,returnFound
	} from "@/api/lostFound.js";
	export default {
		data() {
			return {
				foundId: 0,
				info: {},     // 帖子信息
				userInfo: {}, // 所属用户
				isMyself: false ,// 是否是自己发布的
				delModalShow: false , // 删除确认模态框是否显示
				claimModalShow: false, // 认领确认模态框是否显示
				returnModalShow: false // 归还确认模态框是否显示
			}
		},
		methods: {
			formatDate(dataStr) {
				if (dataStr) {
					return dataStr.replace(/-/g,"/").substring(0, 16)
				}
			},
			// 获取商品详细信息
			getDetailInfo() {
				getLostFoundInfo(this.foundId).then(res => {
					this.info = res.data
				})
			},
			// 获取商品所属用户信息
			getUserInfo() {
				getUserInfo(this.foundId).then(res => {
					this.userInfo = res.data
					
					// 判断是否为自己发布的商品
					if (uni.getStorageSync(constant.userInfo)) {
						if(this.userInfo.userId == uni.getStorageSync(constant.userInfo).userId) {
							this.isMyself = true
						}
					}
				})
			},
			// 点击联系ta
			callTa() {
				plus.runtime.openURL(`mqqwpa://im/chat?chat_type=wpa&uin=${this.userInfo.qqnumber}`, function (res) {
					plus.nativeUI.alert("本机没有安装QQ，无法启动");  
				});
			},
			// 认领
			claim() {
				claim(this.foundId).then(res => {
					// 页面跳转我的认领
					this.toPage('/pages/user/my-lost-found-claim/my-lost-found-claim')
				})
			},
			// 归还
			returnFound() {
				returnFound(this.foundId).then(res => {
					// 页面跳转我的归还
					this.toPage('/pages/user/my-lost-found-return/my-lost-found-return')
				})
			},
			// 确认删除
			del(){
				deleteByFoundId(this.foundId).then(res => {
					uni.navigateBack({
						delta: 1
					})
				})
			},
			// 点击编辑
			edit(){
				this.$u.route('/pages/add-lost-found/add-lost-found', {
					foundId: this.foundId
				});
			},
			// 导航到用户详情页
			toUserInfoPage () {
				this.$u.route('/pages/user-detail/user-detail', {
					userInfo: JSON.stringify(this.userInfo)
				})
			},
			// 页面跳转
			toPage(url) {
				this.$u.route(url)
			}
			
		},
		onLoad(options) {
			this.foundId = options.foundId
			this.getDetailInfo()
			this.getUserInfo()
		}
	}
</script>

<style lang="scss" scoped>
	@import "./lost-found-detail.scss";
</style>
